<template>
  <div>
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="ruleForms"
      size="small"
      class="demo-form-inline"
      label-width="80px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="工序编码" prop="process_code">
            <el-input
              v-model="ruleForms.process_code"
              placeholder="请输入工序编码"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="工序名称" prop="process_name">
            <el-input
              v-model="ruleForms.process_name"
              placeholder="请输入工单名称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="是否启用" prop="enable_flag">
            <el-radio-group v-model="ruleForms.enable_flag">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工艺要求" prop="attention">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="ruleForms.attention"
            >
            </el-input></el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="ruleForms.remark"
            >
            </el-input></el-form-item
        ></el-col>
      </el-row>
    </el-form>

<div v-if="islook">
<el-divider>操作步骤</el-divider>
<el-button v-if="isupdate"
          size="small"
          type="primary"
          icon="el-icon-plus"
          plain
          @click="adds"
          >新增</el-button
        >
<el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column align="center" prop="order_num" label="顺序编号">
        </el-table-column>
        <el-table-column align="center" prop="content_text" label="步骤说明">
        </el-table-column>
        <el-table-column align="center" prop="device" label="辅助设备" >
        </el-table-column>
        <el-table-column align="center" prop="material" label="辅助材料">
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注">
        </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120" v-if="isupdate">
      <template slot-scope="scope">
        <el-button
          @click="deleteRow(scope.row.content_id)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

<el-dialog
    class="box-dialog"
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    custom-class="ss" append-to-body
  >
  <el-form
      ref="dataForms"
      :rules="ruless"
      :model="ruleFormss"
      size="small"
      class="demo-form-inline"
      label-width="80px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="顺序编号" prop="order_num">
            <el-input-number
              v-model="ruleFormss.order_num"
              @change="handleChange"
              :min="1"
            ></el-input-number></el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="辅助设备" prop="device">
            <el-input
              v-model="ruleFormss.device"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="辅助材料" prop="material">
            <el-input
              v-model="ruleFormss.material"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="步骤说明" prop="content_text">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="ruleFormss.content_text"
            >
            </el-input></el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              autosize
              v-model="ruleFormss.remark"
            >
            </el-input></el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        style="padding: 10px 25px; margin-right: 10px"
        size="samll"
        @click="statuss"
        >取 消</el-button
      >
      <el-button
        
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="saves"
        type="primary"
        >确 定</el-button
      >
    </div>
</el-dialog>

</div>

    <div slot="footer" class="dialog-footer">
      <el-button
        style="padding: 10px 25px; margin-right: 10px"
        size="samll"
        @click="status"
        >取 消</el-button
      >
      <el-button
        v-if="!islook"
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="save"
        type="primary"
        >确 定</el-button
      >
      <el-button
        v-if="isupdate"
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="update"
        type="primary"
        >修 改</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dialogFormVisible:{
      type:Boolean,
      required:true
    },
    title:{
      type:String,
      required:true
    },
    tableData: {
      type: Array,
      required: true,
    },
    islook: {
      type: Boolean,
      required: true,
    },
    isupdate: {
      type: Boolean,
      required: true,
    },
    ruleForms: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
    ruless:{
      type: Object,
      required: true,
    },
    ruleFormss: {
      type: Object,
      required: true,
    },
  },
  methods: {
    statuss(e){
      this.$emit("statuss", e);
    },
    saves(e){
      this.$refs.dataForms.validate((valid) => {
        console.log(valid);
        if (valid) {
      this.$emit("saves", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange(e) {
      this.$emit("handleChange", e);
    },
    adds(e){
      this.$emit("adds", e);
    },
    update(e){
      this.$refs.dataForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$emit("update", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteRow(e){
      console.log(e)
      this.$emit("deleteRow", e);
    },
    status(e) {
      this.$emit("status", e);
    },
    save(e) {
      this.$refs.dataForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$emit("save", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.dialog-footer {
  text-align: right;
}
</style>